<template>
  <div id="course-wrapper">
    <div class="course-01-wrap" :style="{backgroundImage:'url(' + coursebanner+ ')'}">
      <div class="course-01-title-wrap">
        <div class="course-01-title01">认证课程体系</div>
        <div class="course-01-title02">CERTIFICATION COURSE SYSTEM</div>
      </div>
    </div>
    <div class="course-02-wrap">
      <div class="course-02-authentication">
        <div class="course-02-authentication-title01">首页 > 认证课程体系</div>
        <div class="course-02-authentication-title02">课程认证体系</div>
        <div class="course-02-authentication-wrap">
          <div
            class="course-02-authentication-item"
            v-for="(item,index) in authentication"
            :key="index"
          >
  <img :src="item.imgurl" class="course-02-authentication-img"  style="width: 136px;height: 32px;"/>
            <div class="course-02-authentication-tit01">{{item.text01}}</div>
            <div class="course-02-authentication-tit02">
              <div>{{item.text021}}</div>
              <div>{{item.text022}}</div>
              <div>{{item.text023}}</div>
            </div>
            <div class="course-02-authentication-tit03">
              
              <router-link to="/huawei">
                <div  class="course-02-authentication-tit03" @click="toTop" style="font-size: 14px;">{{item.text03}}</div>
              </router-link>
            </div>
          </div>
        </div>
      </div>
      <div class="course-03-wrap">
        <div class="course-03-title">开班计划</div>
        <div class="list-wrap">
          <div class="course-plan">
    <div style="display:flex;">
      <div class="course-table">
        <div class="table table-title">
          <span class="a">开课时间</span>
          <span class="b">课程名称</span>
          <span class="c">讲师</span>
        </div>
        <div class="table table-content">
          <span class="a">190921</span>
          <span class="b">HCIA-BD</span>
          <span class="c">吴老师</span>
        </div>
        <div class="table table-content">
          <span class="a">190921</span>
          <span class="b">HCIA-BD</span>
          <span class="c">吴老师</span>
        </div>
      </div>
      <div class="course-table">
        <div class="table table-title">
          <span class="a">开课时间</span>
          <span class="b">课程名称</span>
          <span class="c">讲师</span>
        </div>
        <div class="table table-content">
          <span class="a">190920</span>
          <span class="b">HCIA-RS</span>
          <span class="c">王老师</span>
        </div>
         <div class="table table-content">
          <span class="a">190920</span>
          <span class="b">HCIA-RS</span>
          <span class="c">杨老师</span>
        </div>
         <div class="table table-content">
          <span class="a">190920</span>
          <span class="b">HCIA-RS</span>
          <span class="c">刘老师</span>
        </div>
        
      </div>
    </div>
  </div>
        </div>
      </div>
      <div class="course-04-wrap">
        <div class="course-04-title">师资力量</div>
        <div class="course-04-imgitem" ></div>
        <div class="photo-wrap">
          <div class="course-04-img8" 
          v-for="(item,index) in teacherdata" :key="index" 
          :style="{backgroundImage:'url(' + item.coursepeople+ ')'}" 
          @click="clickTeacher(index)">
              <div class="photo-content" >
                <div class="teachername">{{item.teachername}}</div>
                <div class="category">
                  <p>{{item.category}}</p>
                  <p class="category2">{{item.category2}}</p>
                  <p class="category3" >{{item.category3}}</p>
                </div>
                <div class="details" >{{item.details}}</div>
              </div>
          </div>
        </div>
        </div>
        <div class="course-04-imgitem-dlt-wrap">
        <div class="course-04-imgitem-dlt" v-if='showDetail'>
          <div class="course-04-imgitem-dlt01">
            <span class="course-04-imgitem-dlt0102">{{teachertnformation[teacherIndex].name}}</span>
            <div class="closed" @click="showDetail = false">X</div>
          </div>
          <div class="course-04-imgitem-dlt02">
            <div class="course-04-imgitem-dlt02-01">{{teachertnformation[teacherIndex].tftext1}}</div>
            <div class="course-04-imgitem-dlt02-02">{{teachertnformation[teacherIndex].tftext2}}</div>
            <div class="course-04-imgitem-dlt02-03">{{teachertnformation[teacherIndex].tftext3}}</div>
          </div>
          <div class="course-04-imgitem-dlt03">{{teachertnformation[teacherIndex].tftext4}}</div>
          <div class="course-04-imgitem-dlt04">
            {{
              teachertnformation[teacherIndex].tftext5
            }}
          </div>
        </div>
      </div>
  </div>
  </div>
</template>
<script>
import coursebanner from "./img/coursebanner.jpg";
import ccs01 from "./img/ccs01.png";
import ccs02 from "./img/ccs02.png";
import ccs03 from "./img/ccs03.png";
import ccs04 from "./img/ccs04.png";
import ccs05 from "./img/ccs05.png";
import ccs06 from "./img/ccs06.png";
import ccs07 from "./img/ccs06img.png";
import ccs08 from "./img/ccs07.png";
import ccs09 from "./img/ccs09.png";

import coursepeople01 from "./img/coursepeople01.png";
import coursepeople02 from "./img/coursepeople02.png";
import coursepeople03 from "./img/coursepeople03.png";
import coursepeople04 from "./img/coursepeople04.png";
import coursepeople05 from "./img/coursepeople05.png";
import coursepeople06 from "./img/coursepeople06.png";
import coursepeople07 from "./img/coursepeople07.png";
import coursepeople08 from "./img/coursepeople08.png";

export default {
  data() {
    return {
      coursebanner: coursebanner,
      teacherIndex:0,
      showDetail:true,
      authentication: [
        {
          imgurl: ccs01,
          text01: "思科认证体系",
          text021: "- HCIA",
          text022: "- HCIE",
          text023: "- HCIP",
          text03: "了解更多>>"
        },
        { 
          imgurl: ccs02,
          text01: "华为认证体系",
          text021: "- HCIA",
          text022: "- HCIE",
          text023: "- HCIP",
          text03: "了解更多>>"
        },
        { 
          imgurl: ccs03,
          text01: "甲骨文认证体系",
          text021: "- HCIA",
          text022: "- HCIE",
          text023: "- HCIP",
          text03: "了解更多>>"
        },
        {
          imgurl: ccs04,
          text01: "甲骨文认证体系",
          text021: "- HCIA",
          text022: "- HCIE",
          text023: "- HCIP",
          text03: "了解更多>>"
        },
        { 
          imgurl: ccs05,
          text01: "Vmware认证体系",
          text021: "- HCIA",
          text022: "- HCIE",
          text023: "- HCIP",
          text03: "了解更多>>"
        },
        { 
          imgurl: ccs06,
          text01: "Hadoop认证体系",
          text021: "- HCIA",
          text022: "- HCIE",
          text023: "- HCIP",
          text03: "了解更多>>"
        },
        {
          imgurl: ccs07,
          text01: "项目管理",
          text021: "- HCIA",
          text022: "- HCIE",
          text023: "- HCIP",
          text03: "了解更多>>"
        },
        {
         
          imgurl: ccs08,
          text01: "安全",
          text021: "- HCIA",
          text022: "- HCIE",
          text023: "- HCIP",
          text03: "了解更多>>"
        },
        {
          imgurl: ccs09,
          text01: "其他",
          text021: "- HCIA",
          text022: "- HCIE",
          text023: "- HCIP",
          text03: "了解更多>>"
        },
        {
          imgurl: ccs09,
          text01: "其他",
          text021: "- HCIA",
          text022: "- HCIE",
          text023: "- HCIP",
          text03: "了解更多>>"
        },
        {
          imgurl: ccs09,
          text01: "其他",
          text021: "- HCIA",
          text022: "- HCIE",
          text023: "- HCIP",
          text03: "了解更多>>"
        },
        {
          imgurl: ccs09,
          text01: "其他",
          text021: "- HCIA",
          text022: "- HCIE",
          text023: "- HCIP",
          text03: "了解更多>>"
        }
      ],
      teacherdata:[
        {
          teachername:"王老师1",
          coursepeople:coursepeople01,
          category:"技术类别：Huawei/Cisco/Redhat/",
          category2:"虚拟化",
          category3:"资质认证：思科CCIE-RS/华为HCIE-RS/红帽RHCA/VMware VCP",
          details:"详情>>"
        },
        {
          teachername:"王老师2",
          coursepeople:coursepeople02,
          category:"技术类别：Huawei/Cisco/Redhat/",
          category2:"虚拟化",
          category3:"资质认证：思科CCIE-RS/华为HCIE-RS/红帽RHCA/VMware VCP",
          details:"详情>>"
        },
        {
          teachername:"王老师3",
           coursepeople:coursepeople03,
          category:"技术类别：Huawei/Cisco/Redhat/",
          category2:"虚拟化",
          category3:"资质认证：思科CCIE-RS/华为HCIE-RS/红帽RHCA/VMware VCP",
          details:"详情>>"
        },
        {
          teachername:"王老师4",
          coursepeople:coursepeople04,
          category:"技术类别：Huawei/Cisco/Redhat/",
          category2:"虚拟化",
          category3:"资质认证：思科CCIE-RS/华为HCIE-RS/红帽RHCA/VMware VCP",
          details:"详情>>"
        },
        {
          teachername:"王老师5",
          coursepeople:coursepeople05,
          category:"技术类别：Huawei/Cisco/Redhat/",
          category2:"虚拟化",
          category3:"资质认证：思科CCIE-RS/华为HCIE-RS/红帽RHCA/VMware VCP",
          details:"详情>>"
        },
        {
          teachername:"王老师6",
          coursepeople:coursepeople06,
          category:"技术类别：Huawei/Cisco/Redhat/",
          category2:"虚拟化",
          category3:"资质认证：思科CCIE-RS/华为HCIE-RS/红帽RHCA/VMware VCP",
          details:"详情>>"
        },
        {
          teachername:"王老师7",
            coursepeople:coursepeople07,
          category:"技术类别：Huawei/Cisco/Redhat/",
          category2:"虚拟化",
          category3:"资质认证：思科CCIE-RS/华为HCIE-RS/红帽RHCA/VMware VCP",
          details:"详情>>"
        },{
          teachername:"王老师8",
            coursepeople:coursepeople08,
          category:"技术类别：Huawei/Cisco/Redhat/",
          category2:"虚拟化",
          category3:"资质认证：思科CCIE-RS/华为HCIE-RS/红帽RHCA/VMware VCP",
          details:"详情>>"
        },
      ],
      teachertnformation:[
        {
          name:"王老师",
          tftext1:"华为云计算，华为路由交换，VMware",
          tftext2:"资质认证：HCIP-RS，HCIP-Cloud",
          tftext3:"授课范围：华为云计算IA,IP,IE；华为路由交换IA,IP课程",
          tftext4:"特长和技能：擅长华为云计算虚拟化平台的熟练搭建，使用和维护；华为桌面云平台的熟练搭建，操作使用和维护；华为OpenStack以及相关的运营，运维平台的熟练搭建，操作使用和维护。对华为路由交换设备的熟练配置，使用。",
          tftext5:"从业经验：从事IT培训教育行业一年时间，累计带了HCIA-cloud学生两期，HCIP-cloud学生三期，HCIA-RS学生三期，HCIP-RS学生一期。也在多个高校进行了授课，例如浙江大学城市学院的云计算短学期实训课程，上海立信云计算课程，育英网络安全课程等等。 教学成果：在几期的HCIP-RS和HCIP-CLOUD的课程中有多为学员完成了华为的中级认证。",

        },
          {
          name:"王老师1",
          tftext1:"华为云计算，华为路由交换，VMware",
          tftext2:"资质认证：HCIP-RS，HCIP-Cloud",
          tftext3:"授课范围：华为云计算IA,IP,IE；华为路由交换IA,IP课程",
          tftext4:"特长和技能：擅长华为云计算虚拟化平台的熟练搭建，使用和维护；华为桌面云平台的熟练搭建，操作使用和维护；华为OpenStack以及相关的运营，运维平台的熟练搭建，操作使用和维护。对华为路由交换设备的熟练配置，使用。",
          tftext5:"从业经验：从事IT培训教育行业一年时间，累计带了HCIA-cloud学生两期，HCIP-cloud学生三期，HCIA-RS学生三期，HCIP-RS学生一期。也在多个高校进行了授课，例如浙江大学城市学院的云计算短学期实训课程，上海立信云计算课程，育英网络安全课程等等。 教学成果：在几期的HCIP-RS和HCIP-CLOUD的课程中有多为学员完成了华为的中级认证。",
        },
          {
          name:"王老师2",
          tftext1:"华为云计算，华为路由交换，VMware",
          tftext2:"资质认证：HCIP-RS，HCIP-Cloud",
          tftext3:"授课范围：华为云计算IA,IP,IE；华为路由交换IA,IP课程",
          tftext4:"特长和技能：擅长华为云计算虚拟化平台的熟练搭建，使用和维护；华为桌面云平台的熟练搭建，操作使用和维护；华为OpenStack以及相关的运营，运维平台的熟练搭建，操作使用和维护。对华为路由交换设备的熟练配置，使用。",
          tftext5:"从业经验：从事IT培训教育行业一年时间，累计带了HCIA-cloud学生两期，HCIP-cloud学生三期，HCIA-RS学生三期，HCIP-RS学生一期。也在多个高校进行了授课，例如浙江大学城市学院的云计算短学期实训课程，上海立信云计算课程，育英网络安全课程等等。 教学成果：在几期的HCIP-RS和HCIP-CLOUD的课程中有多为学员完成了华为的中级认证。",
        },
        {
          name:"王老师3",
          tftext1:"华为云计算，华为路由交换，VMware",
          tftext2:"资质认证：HCIP-RS，HCIP-Cloud",
          tftext3:"授课范围：华为云计算IA,IP,IE；华为路由交换IA,IP课程",
          tftext4:"特长和技能：擅长华为云计算虚拟化平台的熟练搭建，使用和维护；华为桌面云平台的熟练搭建，操作使用和维护；华为OpenStack以及相关的运营，运维平台的熟练搭建，操作使用和维护。对华为路由交换设备的熟练配置，使用。",
          tftext5:"从业经验：从事IT培训教育行业一年时间，累计带了HCIA-cloud学生两期，HCIP-cloud学生三期，HCIA-RS学生三期，HCIP-RS学生一期。也在多个高校进行了授课，例如浙江大学城市学院的云计算短学期实训课程，上海立信云计算课程，育英网络安全课程等等。 教学成果：在几期的HCIP-RS和HCIP-CLOUD的课程中有多为学员完成了华为的中级认证。",
        },
        {
          name:"王老师4",
          tftext1:"华为云计算，华为路由交换，VMware",
          tftext2:"资质认证：HCIP-RS，HCIP-Cloud",
          tftext3:"授课范围：华为云计算IA,IP,IE；华为路由交换IA,IP课程",
          tftext4:"特长和技能：擅长华为云计算虚拟化平台的熟练搭建，使用和维护；华为桌面云平台的熟练搭建，操作使用和维护；华为OpenStack以及相关的运营，运维平台的熟练搭建，操作使用和维护。对华为路由交换设备的熟练配置，使用。",
          tftext5:"从业经验：从事IT培训教育行业一年时间，累计带了HCIA-cloud学生两期，HCIP-cloud学生三期，HCIA-RS学生三期，HCIP-RS学生一期。也在多个高校进行了授课，例如浙江大学城市学院的云计算短学期实训课程，上海立信云计算课程，育英网络安全课程等等。 教学成果：在几期的HCIP-RS和HCIP-CLOUD的课程中有多为学员完成了华为的中级认证。",
        },
        {
          name:"王老师5",
          tftext1:"华为云计算，华为路由交换，VMware",
          tftext2:"资质认证：HCIP-RS，HCIP-Cloud",
          tftext3:"授课范围：华为云计算IA,IP,IE；华为路由交换IA,IP课程",
          tftext4:"特长和技能：擅长华为云计算虚拟化平台的熟练搭建，使用和维护；华为桌面云平台的熟练搭建，操作使用和维护；华为OpenStack以及相关的运营，运维平台的熟练搭建，操作使用和维护。对华为路由交换设备的熟练配置，使用。",
          tftext5:"从业经验：从事IT培训教育行业一年时间，累计带了HCIA-cloud学生两期，HCIP-cloud学生三期，HCIA-RS学生三期，HCIP-RS学生一期。也在多个高校进行了授课，例如浙江大学城市学院的云计算短学期实训课程，上海立信云计算课程，育英网络安全课程等等。 教学成果：在几期的HCIP-RS和HCIP-CLOUD的课程中有多为学员完成了华为的中级认证。",
        },
        {
          name:"王老师6",
          tftext1:"华为云计算，华为路由交换，VMware",
          tftext2:"资质认证：HCIP-RS，HCIP-Cloud",
          tftext3:"授课范围：华为云计算IA,IP,IE；华为路由交换IA,IP课程",
          tftext4:"特长和技能：擅长华为云计算虚拟化平台的熟练搭建，使用和维护；华为桌面云平台的熟练搭建，操作使用和维护；华为OpenStack以及相关的运营，运维平台的熟练搭建，操作使用和维护。对华为路由交换设备的熟练配置，使用。",
          tftext5:"从业经验：从事IT培训教育行业一年时间，累计带了HCIA-cloud学生两期，HCIP-cloud学生三期，HCIA-RS学生三期，HCIP-RS学生一期。也在多个高校进行了授课，例如浙江大学城市学院的云计算短学期实训课程，上海立信云计算课程，育英网络安全课程等等。 教学成果：在几期的HCIP-RS和HCIP-CLOUD的课程中有多为学员完成了华为的中级认证。",
        },
        {
          name:"王老师7",
          tftext1:"华为云计算，华为路由交换，VMware",
          tftext2:"资质认证：HCIP-RS，HCIP-Cloud",
          tftext3:"授课范围：华为云计算IA,IP,IE；华为路由交换IA,IP课程",
          tftext4:"特长和技能：擅长华为云计算虚拟化平台的熟练搭建，使用和维护；华为桌面云平台的熟练搭建，操作使用和维护；华为OpenStack以及相关的运营，运维平台的熟练搭建，操作使用和维护。对华为路由交换设备的熟练配置，使用。",
          tftext5:"从业经验：从事IT培训教育行业一年时间，累计带了HCIA-cloud学生两期，HCIP-cloud学生三期，HCIA-RS学生三期，HCIP-RS学生一期。也在多个高校进行了授课，例如浙江大学城市学院的云计算短学期实训课程，上海立信云计算课程，育英网络安全课程等等。 教学成果：在几期的HCIP-RS和HCIP-CLOUD的课程中有多为学员完成了华为的中级认证。",
        },
      ],
      coursepeople:[  
        coursepeople01,coursepeople02,coursepeople03,coursepeople04,
        coursepeople05,coursepeople06,coursepeople07,coursepeople08,
      ]
    
    };
  },
  methods:{
   closed(){
  },
  clickTeacher(index){

    this.teacherIndex = index
    this.showDetail = true
    // this.obj = this.teachertnformation.filter((item,_index)=>index==_index)[0]
  },
  toTop(){
    window.scroll(0,0)
  },
}
}
</script>
<style>
#course-wrapper{
    background-color: #f4f4f4;
}
.course-01-wrap{
    width: 100%;
    height: 480px;
    overflow: hidden;
    position: relative;
}
.course-01-title-wrap{
    margin-top: 140px;
    margin-left: 120px;
    position: relative;
}
.course-01-title01{
	font-size: 28px;
	line-height: 40px;
  color: #f4f4f4;
  margin-bottom: 20px;
}
.course-01-title02{
  font-family: Humanist521BT-Light;
	font-size: 24px;
	line-height: 17px;
	color: #c9c9c9;
}
 /* &.active{
        border-top 4px solid #da0800
      } */
.course-02-wrap{
  width: 83%;
  padding:8.5%;
}
.course-02-authentication{
  width: 1200px;
  margin-top: -243px;
  position: relative;
  background-color: #ffffff;
  padding-bottom: 40px;
}
.course-02-authentication-title01{
    font-family: MicrosoftYaHeiLight;
    font-size: 12px;
    line-height: 40px;
    color: #666666;
    margin-right: 41px;
    margin-left: 80%;
}
.course-02-authentication-title02{
  align-items: center;
  text-align: center;
	font-size: 28px;
	line-height: 40px;
  color: #1b1b1b;
  margin-bottom: 38px;
}
.course-02-authentication-wrap{
  width:83%;
  margin-left: 8%;
  display: -webkit-box;
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: space-between; 
}
.course-02-authentication-item{
    padding-top: 30px;
    text-align: center;
    align-items: center;
    width: 265px;
    height: 313px;
    background-color: #ffffff;
    box-shadow: 0px 3px 8px 0px 
    rgba(0, 0, 0, 0.15);
    border: solid 1px #dcdcdc;
    margin-bottom: 20px;    
}

.course-02-authentication-tit01{
	font-size: 16px;
	line-height: 40px;
	color: #1b1b1b;
}
.course-02-authentication-tit02{
	font-size: 14px;
	line-height: 24px;
  color: #666666;
  margin-top: 40px;
  margin-bottom: 60px;
}
a:link{
    color: #1b1b1b;
}
a:hover{
    color: #009bec;
}
.course-03-wrap{
    width: 1200px;
    margin-top: 20px;
    position: relative;
    background-color: #ffffff;
    padding:71px 0 70px 0;
}
.course-03-title{
    position: relative;
    text-align: center;
    font-size: 28px;
    letter-spacing: 0px;
    color: #1b1b1b;
}
.listtext{
    width: 540px;
}
.course-list-item{
    width: 540px;
    height: 48px;
}
tr{
    background-color: #ffffff;
	border: solid 2px #e2b8ad;
}
.line01{
     /* margin-left:30px;
    margin-right: 100px; */
}
.list-wrap{
    display: flex;
}
.list-01{
    margin-right: 40px;
}
.listtext{
    margin-bottom: 10px;
}
table .course-list-item{
    background-color: #ffffff;
	border: solid 2px #e2b8ad;
}
.course-04-wrap{
    width: 1200px;
    background-color: #ffffff;
    margin-top: 20px;
    padding:71px 0 60px 0;
}
.course-list-title{
    display: flex;
    flex-wrap: nowrap;
}
.course-04-title{
	font-size: 28px;
	line-height: 40px;
    color: #1b1b1b;
    text-align: center;
}
.course-04-imgwrap{
    display: flex;
    flex-wrap: wrap;
    margin-left: 40px;
    
}
.photo-wrap{
  display: flex;
  flex-wrap: wrap;
  margin-left: 40px;
  margin-right: 40px;
  justify-content: space-between;
}
.course-04-img1{
    margin-right: 40px;
    margin-top: 40px;
    background-size: 100% auto;
    width: 250px;
    height: 280px;
    background-color: #cbcbcb;
}
.photo-content{
  width: 250px;
  height: 220px;
  margin-top: 60px;
  background-color: #da0800;
  padding: 25px 16px 15px 21px;
  opacity: 0;
}

.photo-content:active{
  opacity: 1;
}
.teachername{
	font-size: 16px;
	color: #ffffff;
}
.category{
  font-size: 12px;
  margin-top: 20px;
	color: #ffffff;
}

.details{
  margin-top: 20px;
  text-align: right;
  font-size: 12px;
	color: #760602;
}

.course-04-img8{
    margin-top: 40px;
    width: 250px;
    height: 280px;
    background-color: #cbcbcb;
    background-repeat: no-repeat;
    block-size: 100% 100%；

}
.course-04-imgitem{
    margin-left: 41px;
    
}
.course-04-imgitem-dlt01{
  display: flex;
  justify-content: space-between;
  font-family: MicrosoftYaHei-Bold;
	font-size: 20px;
	line-height: 30px;
	color: #ffffff;
}
.closed{
    color: #da0800;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    background-color: #ffffff;
    cursor: pointer;
}
.course-04-imgitem-dlt-wrap{
    width: 88%;
    /* background-color: #ffffff; */
    margin-left: 8%;
}
.course-04-imgitem-dlt{
    padding: 40px 80px 0 81px;
    width: 1200px;
    height: 338px;
    background-color: #da0800;
    font-family: MicrosoftYaHei-Bold;
    margin-left: -75px;
    color: #ffffff;
}
.course-04-imgitem-dlt02{
    margin-bottom: 40px;
}
.course-04-imgitem-dlt03{
    margin-bottom: 35px;
    font-size: 14px;
}
</style>